
const nameSalary = document.querySelector('[name=salary]')
const studentCount = document.querySelector('[name=student_count]')
const nameAge = document.querySelector('[name=age]')
const groupCount = document.querySelector('[name=group_count]')

async function getData() {
    const res = await axios({
        url: '/dashboard',
        method: 'get'
    })
    const { year, salaryData, groupData, provinceData, overview } = res.data.data
    console.log(overview);
    // 平均薪资
    nameSalary.innerText = overview.salary
    // 班级人数
    studentCount.innerText = overview.student_count
    // 平均年龄
    nameAge.innerText = overview.age
    // 小组个数
    groupCount.innerText = overview.group_count
    function salaryEchart(year) {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.querySelector('#line'))

        // 指定图表的配置项和数据
        const option = {
            // 标题部分的设置
            title: {
                text: '2021全学科薪资走势',
                top: '2%',
                left: '3%'
            },
            // 图表
            grid: {
                // 设置上下左右的间隙
                top: '15%',
                left: '10%',
                right: '10%',
                bottom: '10%'
            },
            // x轴的设置
            xAxis: {
                type: 'category',
                data: year.map(v => v.month), // 箭头行数 一行代码 省略 {} return
                // x轴线段设置
                axisLine: {
                    // 线段的样式
                    lineStyle: {
                        // 类型 虚线
                        type: 'dashed',
                        // 颜色
                        color: 'lime'
                    }
                },
                // x轴文本设置
                axisLabel: {
                    // 颜色
                    color: 'black'
                }
            },
            // y轴的设置
            yAxis: {
                type: 'value',
                // 分割线
                splitLine: {
                    // 线的样式
                    lineStyle: {
                        type: 'dashed', // 类型
                        color: 'deepskyblue' // 颜色
                    }
                }
            },
            color: ['aqua'],
            // 提示框 设置了才会出现
            tooltip: {
                show: true
            },
            series: [
                {
                    data: year.map(v => v.salary),
                    type: 'line',
                    // 圆圈
                    smooth: true,
                    // 圆圈大小
                    symbolSize: 10,
                    // 线宽
                    lineStyle: {
                        width: 5
                    },
                    // 区域颜色
                    areaStyle: {
                        // 渐变
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [
                                {
                                    offset: 0,
                                    color: '#aed4ff' // 0% 处的颜色
                                },
                                {
                                    offset: 0.7,
                                    color: '#ffffff' // 100% 处的颜色
                                }
                            ],
                            global: false // 缺省为 false
                        }
                    }
                }
            ]
        }
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option)
    }
    // 调用+传递数据
    salaryEchart(year)


    function salaryPieEchart(salaryData) {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.querySelector('#salary'))

        // 指定图表的配置项和数据
        const option = {
            title: {
                text: '班级薪资分布',
                top: '2%',
                left: '3%'
            },
            tooltip: {
                trigger: 'item'
            },
            // 图例
            legend: {
                bottom: '5%',
                left: 'center'
            },
            // 颜色
            color: ['#fda224', '#5097ff', '#3fceff', '#34d39a', 'yellowgreen'],
            series: [
                {
                    name: 'Access From',
                    type: 'pie',
                    radius: ['60%', '80%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderRadius: 10,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '40',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: salaryData.map(v => {
                        return {
                            value: v.g_count + v.b_count,
                            name: v.label
                        }
                    })

                }
            ]
        }
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option)
    }
    salaryPieEchart(salaryData)

    function groupSalaryEchart(groupData) {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.querySelector('#lines'))

        // 指定图表的配置项和数据
        const option = {
            // x轴设置
            xAxis: {
                type: 'category',
                data: groupData[1].map(v => v.name),
                // 线段设置
                axisLine: {
                    // 线的样式
                    lineStyle: {
                        type: 'dashed',
                        color: '#d4d4d6'
                    }
                }
            },
            yAxis: {
                type: 'value',
                // 分割线设置
                splitLine: {
                    // 线的样式
                    lineStyle: {
                        type: 'dashed',
                        color: '#d4d4d6'
                    }
                }
            },
            // 颜色
            color: [
                // 渐变
                {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                        {
                            offset: 0,
                            color: '#34d29a' // 0% 处的颜色
                        },
                        {
                            offset: 1,
                            color: '#d4f5ea' // 100% 处的颜色
                        }
                    ],
                    global: false // 缺省为 false
                },
                {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                        {
                            offset: 0,
                            color: '#499fed' // 0% 处的颜色
                        },
                        {
                            offset: 1,
                            color: '#d8eafb' // 100% 处的颜色
                        }
                    ],
                    global: false // 缺省为 false
                }
            ],
            series: [
                // 柱状图 给多个图形,会有柱形
                {
                    data: groupData[1].map(v => v.hope_salary),
                    type: 'bar'
                },
                {
                    data: groupData[1].map(v => v.salary),
                    type: 'bar'
                }
            ]
        }

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option)

        // ---------- 点击按钮高亮 ----------
        const btns = document.querySelectorAll('#btns button')
        btns.forEach(v => {
            v.onclick = function () {
                // console.log('clickme')
                // 移除所有的高亮类名
                btns.forEach(item => item.classList.remove('btn-blue'))
                // 为自己添加高亮类名
                this.classList.add('btn-blue')
                // 更新数据 innerHTML可能会因为格式化多一些内容
                const index = this.innerHTML.trim()
                // console.log('index:', index)
                // 更新图表
                // x轴的数据
                option.xAxis.data = groupData[index].map(v => v.name)
                // 2个柱形图的数据
                option.series[0].data = groupData[index].map(v => v.hope_salary)
                option.series[1].data = groupData[index].map(v => v.salary)

                myChart.setOption(option)
            }
        })


    }
    groupSalaryEchart(groupData)



    function boyGirlEchart(salaryData) {
        console.log('groupData:', groupData)
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.querySelector('#gender'))

        // 指定图表的配置项和数据
        const option = {
            // title可以设置一个数组 给多个标题
            title: [
                {
                    text: '男女薪资分布',
                    top: '3%',
                    left: '4%'
                },
                {
                    text: '男生',
                    left: 'center',
                    top: '45%'
                },
                {
                    text: '女生',
                    left: 'center',
                    top: '85%'
                }
            ],
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                show: false
            },
            color: ['#fda224', '#5097ff', '#3abcfa', '#34d39a', 'yellowgreen'],
            series: [
                {
                    name: 'Access From',
                    type: 'pie',
                    radius: ['25%', '35%'],
                    // 圆心的位置
                    center: ['50%', '30%'],
                    data: salaryData.map(v => {
                        return {
                            value: v.b_count,
                            name: v.label
                        }
                    }),
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                },
                {
                    name: 'Access From',
                    type: 'pie',
                    radius: ['25%', '35%'],
                    center: ['50%', '70%'],
                    data: salaryData.map(v => {
                        return {
                            value: v.g_count,
                            name: v.label
                        }
                    }),
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        }

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option)
    }
    boyGirlEchart(salaryData)
}
getData()
